<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>申请单</title>
</head>
<body>
<style>
    .btn_a {
        background-image: linear-gradient(to right, #b8bcc4 0%, #757f9a 100%, #d7dde8 100%);
        text-align: center;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: white;
        border-radius: 10px;
        border: white;
    }
    .btn_a:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }
    .btn_a:active{
        transform: scale(0.9);
    }
    .btn_b {
        background-image: linear-gradient(to right, #b8bcc4 0%, #757f9a 100%, #d7dde8 100%);
        text-align: center;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: white;
        border-radius: 10px;
        border: white;
    }
    .btn_b:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }
    .btn_b:active{
        transform: scale(0.9);
    }
    .btn_c {
        background-image: linear-gradient(to right, #b8bcc4 0%, #757f9a 100%, #d7dde8 100%);
        text-align: center;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: white;
        border-radius: 10px;
        border: white;
    }
    .btn_c:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }
    .btn_c:active{
        transform: scale(0.9);
    }
    .btn_d {
        background-image: linear-gradient(to right, #b8bcc4 0%, #757f9a 100%, #d7dde8 100%);
        text-align: center;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: white;
        border-radius: 10px;
        border: white;
    }
    .btn_d:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }
    .btn_d:active{
        transform: scale(0.9);
    }

    div{
        border-radius: 3px;
        min-height: 18px;
    }
    body {
        background-color: #7291B5;
        font-family: Arial, sans-serif;
        margin: 0px;
        padding: 0px;
    }
    input {
        font-size:12px;font-family: 'Microsoft YaHei', '微软雅黑', MicrosoftJhengHei, '华文细黑', STHeiti, MingLiu;
        border:rgb(235, 235, 235) 1px solid;border-radius: 3px;padding: 5px 8px;outline: 0;
    }
    input:hover{ border: 1px solid #020202; }

    .div_total {
        background:linear-gradient(to top right, #ffffff,#EAEDEEFF);
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
        height:854px ;
        width:1473px ;
        position:absolute;
        margin-top: 20px;
        margin-left: 20px;
    }
    .div_top { background:linear-gradient(to top right, #ffffff,#EAEDEEFF);box-shadow: 0px 0px 10px 0px rgb(142, 144, 141);height:106px ;position:relative; margin: 10px;}
    .div_img { height:95px ;float:none;width:147px ;position:relative;left:10px;bottom:96px;margin:5px 0 5px 0; }
    .div_btn { position:relative;left:179px;top:5px;margin:5px 0 0 5px;height:95px ;width:1270px ; }
    .div_main { position:relative;top:2px;height:700px ;margin:22px auto 22px auto; }
    .div_main_left { background:linear-gradient(to top right, #ffffff,#EAEDEEFF);box-shadow: 0px 0px 10px 0px rgb(142, 144, 141);margin:10px 10px 10px 10px;position:relative;width:147px ;height:678px ; }
    .div_main_right { background:linear-gradient(to top right, #ffffff,#EAEDEEFF);box-shadow: 0px 0px 10px 0px rgb(142, 144, 141);margin:0px 10px 10px 10px;position:absolute;left:168px;top:0px;width:1282px ;height:678px ; }
    .img { height:94px ;width:117px ;position:relative;left:14px;margin:auto auto auto auto;background-size:cover;background-attachment:local;background-origin:border-box;}
    .tittle { position:relative;color:rgba(0, 0, 0, 1);font-style:normal;font-size:27px;text-shadow:0 0 0 rgba(0, 0, 0, 0);box-shadow:0 0 0 0 rgba(31, 31, 31, 31);opacity:1;transform:translate(0,19px);border:rgba(31, 31, 31, 1) solid 1px;text-align:center;letter-spacing:5px; }


    .btn_b { position:relative;width:140px ;height:95px ;bottom:0px;font-style:normal;color:rgba(0, 0, 0, 1);font-size:32px;font-weight:bolder;text-align:center;text-decoration:underline;cursor:pointer; }
    .btn_c { width:140px ;height:95px ;position:relative;font-size:32px;font-style:normal;font-weight:bolder;text-align:center;text-decoration:underline;color:rgba(0, 0, 0, 1);cursor:pointer; }
    .btn_d { width:140px ;height:95px ;position:relative;color:rgba(0, 0, 0, 1);font-style:normal;font-size:32px;font-weight:bolder;text-align:center;text-decoration:underline;cursor:pointer; }
    .btn_a { width:140px ;height:95px ;position:relative;color:rgba(0, 0, 0, 1);font-size:32px;font-style:normal;font-weight:bolder;text-align:center;text-decoration:underline;cursor:pointer; }
    .form_a { position:relative;top:10px;left:10px;bottom:10px;right:10px;width:1280px ;margin:10px 10px 10px 10px;cursor:pointer;height:610px ; }

    .div_name { position:relative;float: left;margin:8px 10px 8px 8px;width: 500px;height:50px ; }
    .txt_name { margin:0 10px 10px 25px;color:rgba(0, 0, 0, 1);font-style:normal;font-size:25px;font-weight:bolder;cursor:pointer;position:relative;top:10px; }
    .name { border:rgba(0, 0, 0, 1) solid 1px;margin:0 10px 10px 0;position:relative;height:24px ;width:300px ;font-style:italic;font-weight:normal;cursor:text;color:rgba(0, 0, 0, 1);font-size:25px;top:10px; }

    .div_age { position:relative;float: left;margin:8px 10px 8px 8px;width: 500px;height:50px ; }
    .txt_age { margin:0 10px 10px 25px;color:rgba(0, 0, 0, 1);font-style:normal;font-size:25px;font-weight:bolder;cursor:pointer;position:relative;top:10px; }
    .age { border:rgba(0, 0, 0, 1) solid 1px;margin:0 10px 10px 0;position:relative;height:24px ;width:300px ;font-style:italic;font-weight:normal;cursor:text;color:rgba(0, 0, 0, 1);font-size:25px;top:10px; }

    .div_sexy { position:relative;float: left;margin:8px 10px 8px 8px;width: 500px;height:50px ; }
    .txt_sexy { margin:0 10px 10px 25px;color:rgba(0, 0, 0, 1);font-style:normal;font-size:25px;font-weight:bolder;cursor:pointer;position:relative;top:10px; }
    .sexy { margin:0 10px 10px 0;position:relative;top:10px;color:rgba(0, 0, 0, 1);font-style:normal;font-size:25px;border:rgba(0, 0, 0, 1) solid 1px;font-weight:normal;cursor:pointer;height:32px ;width:60px ;text-align:center; }

    .div_department { position:relative;float: left;margin:8px 10px 8px 8px;width: 500px;height:50px ; }
    .txt_department { margin:0 10px 10px 25px;color:rgba(0, 0, 0, 1);font-style:normal;font-size:25px;font-weight:bolder;cursor:pointer;position:relative;top:10px; }
    .department{ margin:0 10px 10px 0;position:relative;top:10px;color:rgba(0, 0, 0, 1);font-style:normal;font-size:25px;border:rgba(0, 0, 0, 1) solid 1px;font-weight:normal;cursor:pointer;height:32px ;width:90px ;text-align:center; }

    .div_doctor { position:relative;float: left;margin:8px 10px 8px 8px;width: 500px;height:50px ; }
    .txt_doctor { margin:0 10px 10px 25px;color:rgba(0, 0, 0, 1);font-style:normal;font-size:25px;font-weight:bolder;cursor:pointer;position:relative;top:10px; }
    .doctor { margin:0 10px 10px 0;position:relative;top:10px;color:rgba(0, 0, 0, 1);font-style:normal;font-size:25px;border:rgba(0, 0, 0, 1) solid 1px;font-weight:normal;cursor:pointer;height:32px ;width:90px ;text-align:center; }

    .div_date { position:relative;float: left;margin:8px 10px 8px 8px;width: 500px;height:50px ; }
    .txt_date { margin:0 10px 10px 25px;color:rgba(0, 0, 0, 1);font-style:normal;font-size:25px;font-weight:bolder;cursor:pointer;position:relative;top:10px; }
    .date { border:rgba(0, 0, 0, 1) solid 1px;margin:0 10px 10px 0;width:300px ;height:24px ;position:relative;top:10px;color:rgba(0, 0, 0, 1);font-size:25px;font-weight:normal;cursor:text;font-style:italic; }

    .div_disease_types { position:relative;float: left;margin:8px 10px 8px 8px;width: 500px;height:50px ; }
    .txt_disease_types { margin:0 10px 10px 25px;color:rgba(0, 0, 0, 1);font-style:normal;font-size:25px;font-weight:bolder;cursor:pointer;position:relative;top:10px; }
    .disease_types { border:rgba(0, 0, 0, 1) solid 1px;margin:0 0px 10px 0px;position:relative;height:24px ;width:50px ;font-style:italic;font-weight:bolder;cursor:text;color:rgba(0, 0, 0, 1);font-size:25px;top:10px; }

    .div_medicine_types { position:relative;float: left;margin:8px 10px 8px 8px;width:500px;height:50px ; }
    .txt_medicine_types { margin:0 10px 10px 25px;color:rgba(0, 0, 0, 1);font-style:normal;font-size:25px;font-weight:bolder;cursor:pointer;position:relative;top:10px; }
    .medicine_types { border:rgba(0, 0, 0, 1) solid 1px;margin:0 0px 10px 0px;position:relative;height:24px ;width:50px ;font-style:italic;font-weight:bolder;cursor:text;color:rgba(0, 0, 0, 1);font-size:25px;top:10px; }

    .div_describe { float: left;margin:8px 10px 8px 8px;position:relative;width: 500px;height:140px ; }
    .txt_describe { float: left;margin:0 10px 10px 25px;color:rgba(0, 0, 0, 1);font-style:normal;font-size:25px;font-weight:bolder;cursor:pointer;position:relative;top:10px; }
    .describe { border:rgba(0, 0, 0, 1) solid 1px;margin:0 10px 10px 0;position:relative;height:100px ;width:330px ;font-style:italic;font-weight:normal;cursor:text;color:rgba(0, 0, 0, 1);top:10px; }

    .div_medical_history { float: left;margin:8px 10px 8px 8px;position:relative;width: 500px;height:140px ; }
    .txt_medical_history { float: left;margin:0 10px 10px 25px;color:rgba(0, 0, 0, 1);font-style:normal;font-size:25px;font-weight:bolder;cursor:pointer;position:relative;top:10px; }
    .medical_history { border:rgba(0, 0, 0, 1) solid 1px;margin:0 10px 10px 0;position:relative;height:100px ;width:330px ;font-style:italic;font-weight:normal;cursor:text;color:rgba(0, 0, 0, 1);top:10px; }

    .div_attention { float: left;margin:8px 10px 8px 8px;position:relative;width: 500px;height:140px ; }
    .txt_attention { float: left;margin:0 10px 10px 25px;color:rgba(0, 0, 0, 1);font-style:normal;font-size:25px;font-weight:bolder;cursor:pointer;position:relative;top:10px; }
    .attention { border:rgba(0, 0, 0, 1) solid 1px;margin:0 10px 10px 0;position:relative;height:100px ;width:280px ;font-style:italic;font-weight:normal;cursor:text;color:rgba(0, 0, 0, 1);top:10px; }

    .btn_create {position: relative;top: 535px;right: 55px;font-size: 18px;
        border: solid 1px black;
        background-image: linear-gradient(to right, #b8bcc4 0%, #757f9a 100%, #d7dde8 100%);
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: #000000;
        border-radius: 3px;
        border: black;
        cursor: pointer;}
    .btn_create:hover{
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }
    .btn_create:active{
        transform: scale(0.9);
    }
    .btn_save{position: relative;top: 535px;right: 55px;font-size: 18px;
        border: solid 1px black;
        background-image: linear-gradient(to right, #b8bcc4 0%, #757f9a 100%, #d7dde8 100%);
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: #000000;
        border-radius: 3px;
        border: black;
        cursor: pointer;}
    .btn_save:hover{
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }
    .btn_save:active{
        transform: scale(0.9);
    }
    .btn_delete{position: relative;top: 570px;right: 250px;font-size: 18px;
        border: solid 1px black;
        background-image: linear-gradient(to right, #b8bcc4 0%, #757f9a 100%, #d7dde8 100%);
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: #000000;
        border-radius: 3px;
        border: black;
        cursor: pointer;
    }
    .btn_delete:hover{
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }
    .btn_delete:active{
        transform: scale(0.9);
    }
    .btn_print{
        position: relative;top: 570px;right: 250px;font-size: 18px;
        border: solid 1px black;
        background-image: linear-gradient(to right, #b8bcc4 0%, #757f9a 100%, #d7dde8 100%);
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: #000000;
        border-radius: 3px;
        border: black;
        cursor: pointer;
    }
    .btn_print:hover{
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }
    .btn_print:active{
        transform: scale(0.9);
    }
    .div_user { float:right;position:relative;margin:10px 10px 10px 10px;width:414px ;height:70px ;top:2px;cursor:pointer; }
    .user {
        color:rgba(0, 0, 0, 1);font-style:normal;font-size:25px;text-align:center;cursor:pointer;position:relative;top:20px;
    }
    a{
        color:rgba(0, 0, 0, 1);font-style:normal;font-size:15px;text-align:center;cursor:pointer;position:relative;top:20px;left: 10px;
    }
    #search_name{
        width: 130px;
        border: solid 1px black;
        border-radius: 5px;
    }
    ul li{
        list-style-type: none;
        font-size: 20px;
    }
    #search_name_btn{
        position: absolute;
        width: 148px;
        border: solid 1px black;
        font-size: 15px;
        background-image: linear-gradient(to right, #b8bcc4 0%, #757f9a 100%, #d7dde8 100%);
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: #000000;
        border-radius: 3px;
        border: black;
    }
    #search_name_btn:hover{
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
        border: solid 1px black;
    }
    #search_name_btn:active{
        transform: scale(0.9);
    }
    .patient_list{
        position: relative;
        overflow-y: auto;
        height: 462px;
    }
    .patient_list div{
        text-align: center;
        font-size: 20px;
    }
    .txt_inspection {right:483px;top:440px;color:rgba(0, 0, 0, 1);font-size:25px;font-weight:bolder;cursor:pointer;position:relative;}
    .inspection{
        position: relative;
        width: 450px;
        height: 115px;
        top: 16px;
        left: 118px;
        float: left;
        overflow-y: auto;
    }
    .inspection_items td{
        text-align: center;
        width: 90px;
    }
    #tb_first_row td{
        background-color: #f0f0f0;
        color: #0f0f0f;
        font-weight: bold;
        height: 80px;
    }
    .whether_diagnosis_done{
        position: absolute;
        display: flex;

        width: 147px;
    }
    .whether-diagnostic{
        flex: 1;
        border: solid 1px;
        font-size: 15px;
        background-image: linear-gradient(to right, #b8bcc4 0%, #757f9a 100%, #d7dde8 100%);
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: #000000;
        border-radius: 3px;
    }
    .whether-diagnostic:hover{
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
        border: solid 1px black;
    }
    .whether-diagnostic:active{
        transform: scale(0.9);
    }
    .ul_patients{
        position: relative;
        top: 30px;
    }
</style>
<link href="/static/script/bootstrap_3.3.0/css/modal.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="https://www.58html.com/gui/css/font-awesome/css/font-awesome.css">

<div class="modal fade" id="createInspectionModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 50%;">
        <div class="modal-content" >
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h2 class="modal-title" id="myModalLabel1">新建检查</h2>
            </div>
            <div class="modal-body">
                <form id="createInspectionForm" class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="create-inspection-patientName" class="col-sm-2 control-label">姓名:</label>
                        <div class="col-sm-10" style="width: 150px;">
                            <span id="create-inspection-patientName" class="form-control" ></span>
                        </div>

                    </div>
                    <div class="form-group">
                        <label for="create-inspection-age" class="col-sm-2 control-label" >年龄:</label>
                        <div class="col-sm-10" style="width: 150px;">
                            <span id="create-inspection-age" class="form-control" ></span>
                        </div>
                    </div>
                    <div class="form-group" >
                        <label for="create-inspection-sexy" class="col-sm-2 control-label">性别:</label>
                        <div class="col-sm-10" style="width: 150px;">
                            <span id="create-inspection-sexy" class="form-control"></span>
                        </div>
                    </div>
                    <div id="core_content" style="flex-direction: row;gap: 115px">
                        <div class="form-group">
                            <label for="create-inspection-item" class="col-sm-2 control-label">项目:</label>
                            <div class="form-control" style="width: 285px;height: 100px;overflow-y: auto" id="create-inspection-item">
                                <ul class="inspection_items_name" style="cursor: pointer">
                                </ul>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="create-inspection-sample" class="col-sm-2 control-label">部位:</label>
                            <div class="form-control" style="width: 285px;height: 100px;overflow-y: auto" id="create-inspection-sample">
                                <ul class="inspection_items_sample" style="cursor: pointer">
                                </ul>
                            </div>
                        </div>

                    </div>
                    <div style="display: flex;margin-top: 50px;gap: 115px">
                        <div class="form-group">
                            <label for="create-inspection-frequency" class="col-sm-2 control-label">频次:</label>
                            <div  style="border:0px;width: 300px;height: 50px;" id="create-inspection-frequency">
                                <select type="text" class="form-control" id="frequency">
                                    <option value="now">立即使用</option>
                                    <option value="later">术后使用</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="create-inspection-quantity" class="col-sm-2 control-label">数量:</label>
                            <div  style="border:0px;width: 300px;height: 50px;" id="create-inspection-quantity">
                                <input type="number" class="form-control" id="quantity" style="height: 23px;width: 285px"/>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveInspectionBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<div id="lyrow">


    <div class="div_total">
        <div class="div_top">
            <div class="div_btn">
                <div class="div_user">
                    <span class="user" th:text="${doctor.getDoctorName()}"></span>
                    <a href="/changePassword">修改密码</a>
                    <a href="/logout">退出登录</a>
                    <a href="/changeAccount">更改账户</a>
                </div>

                <input type="button" name="button" value="门诊诊断" class="btn_a">
                <input type="button" name="button" value="门诊处方" class="btn_b">
                <input type="button" name="button" value="申请单" class="btn_c">
                <input type="button" name="button" value="门诊历史" class="btn_d">
            </div>
            <div class="div_img">
                <img src="http://localhost:8080/static/img/图标.png" class="img">
            </div>
        </div>
        <div class="div_main">
            <div class="div_main_left">
                <h1 class="tittle">病人列表</h1>
                <div class="patient_list">
                    <div class="whether_diagnosis_done">
                        <input type="button" class="whether-diagnostic" id="diagnosis_done" value="已诊">
                        <input type="button" class="whether-diagnostic" id="no_diagnosis_done" value="未诊">
                    </div>
                    <ul class="ul_patients"></ul>
                </div>
                <input type="text" name="search_name" id="search_name" value="">
                <input type="button" id="search_name_btn" value="查询"/>
            </div>
            <div class="div_main_right">
                <form class="form_a">
                    <div class="div_name">
                        <span class="txt_name">姓名:</span>
                        <input type="text" name="input" class="name" placeholder="请输入姓名" value="" readonly></div>
                    <div class="div_age">
                        <span class="txt_age">年龄:</span>
                        <input type="text" name="input" class="age" value="" placeholder="请输入年龄" readonly></div>
                    <div class="div_sexy">
                        <span class="txt_sexy">性别:</span>
                        <select name="select" class="sexy">
                            <option value="1">男</option>
                            <option value="0">女</option>
                        </select> </div>
                    <div class="div_department">
                        <span class="txt_department">科室:</span>
                        <select name="select" class="department">
                            <option th:text="${doctor.getDoctorDepartment()}"></option>
                        </select></div>
                    <div class="div_date">
                        <span class="txt_date">日期:</span>
                        <input type="date" name="input" class="date" value="">
                    </div>
                    <div class="div_doctor">
                        <span class="txt_doctor">医生:</span>
                        <select name="select" class="doctor">
                            <option th:value="${doctor.getDoctorId()}" th:text="${doctor.getDoctorName()}"></option>
                        </select>
                    </div>
                    <div class="div_disease_types">
                        <span class="txt_disease_types">疾病种类:</span>
                        <input type="radio" name="disease_types" class="disease_types" value="" checked>普通病
                        <input type="radio" name="disease_types" class="disease_types" value="">慢性病
                        <input type="radio" name="disease_types" class="disease_types" value="">特殊病
                    </div>
                    <div class="div_medicine_types">
                        <span class="txt_medicine_types">药品种类:</span>
                        <input type="radio" name="medicine_types" class="medicine_types" value="" checked>特病辅助用药
                        <input type="radio" name="medicine_types" class="medicine_types" value="">儿童统筹
                        <input type="radio" name="medicine_types" class="medicine_types" value="">特药
                    </div>
                    <div class="div_describe">
                        <span class="txt_describe">主诉:</span>
                        <textarea name="textarea" class="describe"></textarea>
                    </div>
                    <div class="div_medical_history">
                        <span class="txt_medical_history">病史:</span>
                        <textarea name="textarea" class="medical_history"></textarea>
                    </div>
                    <div class="div_attention">
                        <span class="txt_attention">注意事项:</span>
                        <textarea name="textarea" class="attention"></textarea>
                    </div>
                    <span class="txt_inspection">检查：</span>
                    <div  class="inspection" style="border: solid 1px black">
                        <table class="inspection_items" border="1px">
                            <thead>
                                <tr class="inspection_first_row">
                                    <td>项目</td>
                                    <td>执行科室</td>
                                    <td>样本</td>
                                    <td>频次</td>
                                    <td>数量</td>
                                </tr>
                            </thead>
                            <tbody id="inspection_project">

                            </tbody>
                        </table>
                    </div>
                    <input type="button" name="button" value="打印" class="btn_print">
                    <input type="button" name="button" value="删除" class="btn_delete">
                    <input type="button" name="button" value="保存" class="btn_save">
                    <input type="button" name="button" value="新建检查" class="btn_create">
                </form>
            </div></div></div>
</div>
<div class="print-view" style="position:absolute;width:0px;height:0px;left:-500px;top:-500px;">
    <div class="container">
        <div class="header">
            <img src="/static/img/图标.png" class="img">
            <h2 style="position: absolute;top: 130px;">申请单</h2>
            <h3 style="top: 160px;position: absolute">------------------------------------------------------------------------------------------------------------------</h3>
        </div>

        <div class="section" style="margin-top: 50px">

            <h2>患者信息</h2>
            <table class="table" id="tb_patientInformation">
                <tr>
                    <th>姓名</th>
                    <td id="td_patient_name"></td>
                </tr>
                <tr>
                    <th>性别</th>
                    <td id="td_sexy"></td>
                </tr>
                <tr>
                    <th>年龄</th>
                    <td id="td_age"></td>
                </tr>

                <tr>
                    <th>就诊日期</th>
                    <td id="td_date"></td>
                </tr>
                <tr>
                    <th>医生</th>
                    <td id="td_doctor_name" th:text="${doctor.getDoctorName()}"></td>
                </tr>
                <tr>
                    <th>科室</th>
                    <td id="td_department" th:text="${doctor.getDoctorDepartment()}"></td>
                </tr>
            </table>
        </div>
        <div class="section">
            <h2></h2>
            <table class="table">
                <tr>
                    <th style="width: 60px;height:120px ">主诉：</th><td id="td_describe"></td>
                    <th style="width: 60px;">病史：</th><td id="td_history"></td>
                    <th style="width: 60px;"> 注意事项：</th><td id="td_attention"></td>
                </tr>
            </table>
        </div>
        <div class="section">
            <h2>检查项目</h2>
            <table class="table" id="tb_medicalInformation">
                <tr id="tb_first_row">
                    <td>项目</td>
                    <td>执行科室</td>
                    <td>部位</td>
                    <td>频次</td>
                    <td>数量</td>
                </tr>
                <tr>
                    <td id="td_inspectionItemName"></td>
                    <td id="td_executiveDivision"></td>
                    <td id="td_sample"></td>
                    <td id="td_frequency"></td>
                    <td id="td_quantity"></td>
                </tr>
            </table>
            <span style="font-weight: bold;font-size: 15px" id="inspection_id"></span>
        </div>
    </div>
    <footer style="text-align: center;position: relative;top: 200px">
        <p>版权所有 © xdy 打印预览示例</p>
        <h3 style="position: relative">------------------------------------------------------------------------------------------------------------------</h3>
    </footer>
</div>
</body>
<script src="/static/script/jquery-1.11.1-min.js"></script>
<script src="/static/script/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function (){
        $(".btn_a").css({color:"#000000"})
        $(".btn_b").css({color:"#000000"})
        $(".btn_c").css({color:"#f1f1f1"})
        $(".btn_d").css({color:"#000000"})
    })
    var patient_id="";
    var inspection_item_id="";
    var inspection_item_name="";
    var inspection_sample_name="";
    var executive_division="";//执行科室名称
    var inspection_id="";//申请单编号
    var frequency="";
    var quantity="";
    var flag=true;
    $("textarea").change(function (){
        flag=false;
    })
    /**
     * 状态变量，在查询病人时判断当前处于是否完成诊断的列表下 false:处于为诊断; true:处于已经诊断下
     * @type {boolean}
     */
    var whether_diagnosis_flag=true;
    //表格点击函数
    function tableClick(obj){
        inspection_item_name=$($(obj).find("td")[0]).text();
        executive_division=$($(obj).find("td")[1]).text();
        inspection_sample_name=$($(obj).find("td")[2]).text();
        frequency=$($(obj).find("td")[3]).text();
        quantity=$($(obj).find("td")[4]).text();
        inspection_id=$(obj).attr("value");
        $("tr").css({background: "#f1f1f1"})
        $(obj).css({background:"#757f9a"})
    }
    //加载已经诊断病人列表
    function list_diagnosis_done_patients(){
        $.ajax({
            url:'/main/diagnosis_done_patient_list',
            type:'post',
            dataType:'json',
            success:function (data){
                var html="";
                $.each(data.patients,function (index,obj){
                    html+="<li value=\""+obj.patientId+"\"onclick='getPatientInspectionInformation($(this))'>"+obj.patientName+"</li>"
                });
                $(".ul_patients").html(html);
            }
        })
    }
    //加载未诊断病人列表
    function list_no_diagnosis_done_patients(){
        $.ajax({
            url:'/main/no_diagnosis_done_patient_list',
            type:'post',
            dataType:'json',
            success:function (data){
                var html="";
                $.each(data.patients,function (index,obj){
                    html+="<li value=\""+obj.patientId+"\"onclick='getPatientInspectionInformation($(this))'>"+obj.patientName+"</li>"
                });
                $(".ul_patients").html(html);
            }
        })
    }
    //给未诊添加单击事件
    $("#no_diagnosis_done").click(function (){
        whether_diagnosis_flag=false;
        list_no_diagnosis_done_patients();
    })
    //给已诊添加单击事件
    $("#diagnosis_done").click(function (){
        whether_diagnosis_flag=true;
        list_diagnosis_done_patients();
    })
    //给门诊诊断按钮添加单击事件
    $(".btn_a").click(function (){
        window.location.href="/main/index";
    })
    //门诊处方按钮
    $(".btn_b").click(function (){
        window.location.href="/prescription/index";
    })
    //给门诊历史添加单击事件
    $(".btn_d").click(function (){
        window.location.href="/history/index";
    })
    //单击病人显示申请单基本信息
    function getPatientInspectionInformation(obj){
        patient_id=$(obj).val();
        $("li").css({background: "#f1f1f1"});
        $(obj).css({background: "#a3a8b6",width:"60px",borderRadius:"5px"})
        $.ajax({
            url:'/applicationForm/inspectionInformation',
            data:{
                patient_id:patient_id
            },
            type: 'post',
            dataType: 'json',
            success:function (data){
                if(data.code=="0"){
                    $(".name").val(data.patient.patientName);
                    $(".age").val(data.patient.patientAge);
                    if(data.patient.patientSex=="男"){
                        $(".sexy option[value='1']").attr("selected",true);
                        $(".sexy option[value='0']").removeAttr("selected");
                    }else{
                        $(".sexy option[value='0']").attr("selected",true);
                        $(".sexy option[value='1']").removeAttr("selected");
                    }
                    $(".date").val("");
                    $(".describe").val("");
                    $(".medical_history").val("");
                    $(".attention").val("");
                    $("#inspection_project").html("");
                    alert(data.msg);
                }else{
                    $(".name").val(data.patient.patientName);
                    $(".age").val(data.patient.patientAge);
                    if(data.patient.patientSex=="男"){
                        $(".sexy option[value='1']").attr("selected",true);
                        $(".sexy option[value='0']").removeAttr("selected");
                    }else{
                        $(".sexy option[value='0']").attr("selected",true);
                        $(".sexy option[value='1']").removeAttr("selected");
                    }
                    $(".date").val(data.latest_application_time);
                    $(".describe").val(data.inspection_info.description);
                    $(".medical_history").val(data.inspection_info.medicalHistory);
                    $(".attention").val(data.inspection_info.attention);
                    $("#inspection_project").html("");
                    $.each(data.inspectionDtos,function (index,obj){
                        var row=document.createElement("tr");
                        row.setAttribute("value",obj.inspection.inspectionId);
                        row.setAttribute("onclick","tableClick(this)")
                        var cell1=document.createElement("td");
                        cell1.innerHTML=obj.inspectionItemName;
                        var cell2=document.createElement("td");
                        cell2.innerHTML=obj.executiveDivision
                        var cell3=document.createElement("td");
                        cell3.innerHTML=obj.inspection.sample
                        var cell4=document.createElement("td");
                        cell4.innerHTML=obj.inspection.frequency
                        var cell5=document.createElement("td");
                        cell5.innerHTML=obj.inspection.quantity;
                        row.appendChild(cell1)
                        row.appendChild(cell2)
                        row.appendChild(cell3)
                        row.appendChild(cell4)
                        row.appendChild(cell5)
                        var tbody=document.getElementById("inspection_project");
                        tbody.appendChild(row);
                    })
                }
            }
        })
    }
    //给查询按钮添加单击事件
    $("#search_name_btn").click(function (){
        var search_name=$("#search_name").val();
        $.ajax({
            url:'/main/queryBySearchName',
            data:{
                search_name:search_name,
                whether_diagnosis_flag:whether_diagnosis_flag
            },
            dataType:'json',
            type:'post',
            success:function (data){
                var html="";
                $.each(data.patients,function (index,obj){
                    html+="<li value=\""+obj.patientId+"\"onclick='getPatientInspectionInformation($(this))'>"+obj.patientName+"</li>"
                });
                $(".ul_patients").html(html);
            }
        })
    })
    //查询框enter事件
    $("#search_name").keyup(function (event){
        if(event.keyCode===13){
            $("#search_name_btn").trigger("click");
        }
    })
    //给删除添加单击事件
    $(".btn_delete").click(function (){
        if(patient_id==""){
            alert("请选择病人")
        }else if(inspection_id==""){
            alert("请选择一个条目")
        }else{
            $.ajax({
                url:'/applicationForm/delete',
                data:{
                    inspection_id:inspection_id
                },
                dataType:'json',
                type:'post',
                success:function(data){
                    if(data.code=="1"){
                        $.ajax({
                            url:'/applicationForm/inspectionInformation',
                            data:{
                                patient_id:patient_id
                            },
                            type: 'post',
                            dataType: 'json',
                            success:function (data){
                                if(data.code=="0"){
                                    alert(data.msg);
                                }else{
                                    $("#inspection_project").html("");
                                    $.each(data.inspectionDtos,function (index,obj){
                                        var row=document.createElement("tr");
                                        row.setAttribute("value",obj.inspection.inspectionId);
                                        row.setAttribute("onclick","tableClick(this)")
                                        var cell1=document.createElement("td");
                                        cell1.innerHTML=obj.inspectionItemName;
                                        var cell2=document.createElement("td");
                                        cell2.innerHTML=obj.executiveDivision
                                        var cell3=document.createElement("td");
                                        cell3.innerHTML=obj.inspection.sample
                                        var cell4=document.createElement("td");
                                        cell4.innerHTML=obj.inspection.frequency
                                        var cell5=document.createElement("td");
                                        cell5.innerHTML=obj.inspection.quantity;
                                        row.appendChild(cell1)
                                        row.appendChild(cell2)
                                        row.appendChild(cell3)
                                        row.appendChild(cell4)
                                        row.appendChild(cell5)
                                        var tbody=document.getElementById("inspection_project");
                                        tbody.appendChild(row);
                                    })
                                }
                            }
                        })
                    }else{
                        alert(data.message);
                    }
                }
            })
        }
    })
    //给新建检查添加单击事件
    $(".btn_create").click(function (){
        var name=$(".name").val();
        var age=$(".age").val();
        var sexy=$(".sexy").val()=="1"?"男":"女";
        $("#createInspectionForm").get(0).reset();
        $("#createInspectionModal").modal("show");
        $("#create-inspection-patientName").text(name);
        $("#create-inspection-age").text(age);
        $("#create-inspection-sexy").text(sexy);
        $.ajax({
            url:'/applicationForm/inspectionItemList',
            type:'post',
            success:function (data){
                var html="";
                $.each(data.inspectionItems,function (index,obj){
                    html+="<li value=\""+obj.inspectionItemId+"\"onclick='getInspectionSample($(this))'>"+obj.inspectionItemName+"</li>"
                });
                $(".inspection_items_name").html(html);
            }
        })
    })
    //给新建保存添加单击事件
    $("#saveInspectionBtn").click(function (){
        var inspectionItemId=inspection_item_id;
        var inspectionItemName=inspection_item_name;
        var inspectionSampleName=inspection_sample_name;
        var inspectionFrequency=$("#frequency").val()=="now"?"立即使用":"术后使用";
        var inspectionQuantity=$("#quantity").val();
        /*console.log(inspectionItemId)
        console.log(inspectionItemName)
        console.log(inspectionSampleName)
        console.log(inspectionFrequency)
        console.log(inspectionQuantity)*/
        $.ajax({
            url:'/applicationForm/queryOneInspectionItem',
            data:{
                inspectionItemId:inspectionItemId
            },
            type:'post',
            dataType:'json',
            success:function (data){
                executive_division=data.departmentName;
                var tbodyHtml=$("#inspection_project").html();
                tbodyHtml+="<tr value='0' onclick='tableClick(this)'>\n" +
                    "            <td>"+inspectionItemName+"</td>\n" +
                    "            <td>"+executive_division+"</td>\n" +
                    "            <td>"+inspectionSampleName+"</td>\n" +
                    "            <td>"+inspectionFrequency+"</td>\n" +
                    "            <td>"+inspectionQuantity+"</td>\n" +
                    "        </tr>";
                $("#inspection_project").html(tbodyHtml);
                $("#createInspectionModal").modal("hide");
            }
        })


    })
    //单击检查条目显示检查部位
    function getInspectionSample(obj){
        $("li").css({background: "#ffffff"});
        $(obj).css({background: "#a3a8b6",width:"80px",borderRadius:"5px"})
        inspection_item_id=$(obj).val();
        inspection_item_name=$(obj).text();
        var html="";
        if(inspection_item_id=="70001"){
            html+="<li class='sample'>五官</li><li class='sample'>脑部</li><li class='sample'>胸部</li><li class='sample'>心脏</li><li class='sample'>腹部</li><li class='sample'>脊柱</li><li class='sample'>四肢</li>"
            $(".inspection_items_sample").html(html);
        }else if(inspection_item_id=="70002"){
            html+="<li class='sample'>颅脑</li><li class='sample'>颈部</li><li class='sample'>神经系统</li><li class='sample'>胸部</li><li class='sample'>循环系统</li><li class='sample'>四肢关节</li><li class='sample'>体表软组织</li>"
            $(".inspection_items_sample").html(html);
        }else if(inspection_item_id=="70003"){
            html+="<li class='sample'>胃镜</li><li class='sample'>肠镜</li><li class='sample'>小肠镜</li><li class='sample'>超声内镜</li><li class='sample'>膀胱镜</li>"
            $(".inspection_items_sample").html(html);
        }else if(inspection_item_id=="70004"){
            html+="<li class='sample'>神经系统</li><li class='sample'>生殖系统</li><li class='sample'>妇科</li><li class='sample'>泌尿系统</li><li class='sample'>血管</li><li class='sample'>心超</li><li class='sample'>消化系统</li>"
            $(".inspection_items_sample").html(html);
        }else{
            $(".inspection_items_sample").html(html);
        }
        $(".sample").click(function (){
            $(".inspection_items_sample>li").css({background: "#ffffff"});
            $(this).css({background: "#a3a8b6",width:"80px",borderRadius:"5px"})
            inspection_sample_name=$(this).text();
        })
    }
    //给保存按钮添加单击事件
    $(".btn_save").click(function (){
        if(patient_id==""){
            alert("请选择一个病人");
        }else {
            flag=true;
            var description=$(".describe").val();
            var medicalHistory=$(".medical_history").val();
            var attention=$(".attention").val();
            var applyDate=$(".date").val();
            if(description==""||medicalHistory==""||attention==""){
                alert("主诉或病史，注意事项必须填");
            }else {
                var rows=document.getElementById("inspection_project").rows.length;
                var inspection_array=new Array();
                for(var i=0;i<rows;i++){
                    inspection_array[i]=new Array(6);
                    inspection_array[i][0]=document.getElementById("inspection_project").rows[i].getAttribute("value");
                    //获取表格当前行第一列的值，以此类推
                    inspection_array[i][1]=document.getElementById("inspection_project").rows[i].cells[0].innerText;
                    inspection_array[i][2]=document.getElementById("inspection_project").rows[i].cells[1].innerText;
                    inspection_array[i][3]=document.getElementById("inspection_project").rows[i].cells[2].innerText;
                    inspection_array[i][4]=document.getElementById("inspection_project").rows[i].cells[3].innerText;
                    inspection_array[i][5]=document.getElementById("inspection_project").rows[i].cells[4].innerText;
                }
                if(inspection_array.length==0){
                    alert("请选择申请检验项目")
                }else {
                    $.ajax({
                        url:'/applicationForm/saveOrUpdateInspectionApplicationForm',
                        data:{
                            inspection_array:JSON.stringify(inspection_array),
                            description:description,
                            medicalHistory:medicalHistory,
                            attention:attention,
                            applyDate:applyDate,
                            patient_id:patient_id
                        },
                        type:'post',
                        dataType:'json',
                        success:function (data){
                            if(data.code=="1"){
                                var rows=$("#inspection_project").find("tr[value='0']").length;
                                $.each(data.inspectionIds,function (index,obj){
                                    $($("#inspection_project").find("tr[value='0']")[index]).attr({value:obj});
                                })
                                $("tr").css({background: "#f1f1f1"})
                                alert(data.message);
                            }else{
                                alert(data.message);
                            }
                        }
                    })
                }
            }

        }
    })
    //给打印添加单击事件
    $(".btn_print").click(function (){
        if(inspection_id==""){
            alert("请选择一个检查条目打印");
        }else if(flag){
            $.ajax({
                url:'/applicationForm/print',
                data:{
                    inspection_id:inspection_id
                },
                dataType:'json',
                type:'post',
                success:function (data){
                    if(data.code=="0"){
                        alert(data.message);
                        return;
                    }else{
                        $("#td_inspectionItemName").text(inspection_item_name);
                        $("#td_executiveDivision").text(executive_division);
                        $("#td_sample").text(inspection_sample_name);
                        $("#td_frequency").text(frequency);
                        $("#td_quantity").text(quantity);
                        $("#td_describe").text($(".describe").val());
                        $("#td_history").text($(".medical_history").val());
                        $("#td_attention").text($(".attention").val());
                        $("#td_patient_name").text($(".name").val());
                        $("#td_age").text($(".age").val());
                        var sexy=$(".sexy option:selected").val()==1?"男":"女";
                        $("#td_sexy").text(sexy);
                        $("#td_date").text($(".date").val());
                        $("#inspection_id").text("申请单号："+inspection_id);
                        var iframe=document.getElementById("print-iframe");
                        if(iframe==null){
                            var html=$(".print-view").html();
                            iframe = document.createElement('IFRAME');
                            var doc = null;
                            iframe.setAttribute("id", "print-iframe");
                            iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
                            document.body.appendChild(iframe);
                            doc=iframe.contentWindow.document;
                            doc.write("<link href=\"/static/script/bootstrap_3.3.0/css/print_preview.css\" type=\"text/css\" rel=\"stylesheet\" />")
                            doc.write("<div>"+html+"</div>")
                            doc.close();
                            iframe.contentWindow.focus();
                        }
                        setTimeout(function(){iframe.contentWindow.print();},50)
                        setTimeout(()=>{
                            document.body.removeChild(iframe);
                        },2000);
                    }
                }
            })
        }else {
            alert("当前申请单发生改变，请先保存")
        }
    })
</script>
</html>